<template>
    <div class="main-box">
        <div class="top-box">
            <div>
                <div class="mb-5">医师</div>
            </div>
        </div>
        <div class="info-box">
            <div class="info-item">
                <div>
                    <div class="info-num">{{ orgInfo.doc }}</div>
                    <div class="info-title">关联医生</div>
                </div>
                <div>
                    <div class="info-num">{{ orgInfo.orderNum }}</div>
                    <div class="info-title">订单总数</div>
                </div>
                <div>
                    <div class="info-num">{{ orgInfo.orderMoney }}</div>
                    <div class="info-title">订单总额</div>
                </div>
            </div>
            <div class="info-item">
                <div>
                    <div class="info-num">{{ orgInfo.doc }}</div>
                    <div class="info-title">关联医生</div>
                </div>
                <div>
                    <div class="info-num">{{ orgInfo.orderNum }}</div>
                    <div class="info-title">订单总数</div>
                </div>
                <div>
                    <div class="info-num">{{ orgInfo.orderMoney }}</div>
                    <div class="info-title">订单总额</div>
                </div>
            </div>
        </div>
        <div class="item-box">
            <div @click="goTo('dangAn')">
                <van-image width="60" height="60" src="/static/img/doc.png" />
                <div>新建档案</div>
            </div>
            <div @click="goTo('qianYue')">
                <van-image width="60" height="60" src="/static/img/order.png" />
                <div>签约管理</div>
            </div>
            <div @click="goTo('fuWu')">
                <van-image width="60" height="60" src="/static/img/loginOut.png" />
                <div>服务管理</div>
            </div>
        </div>
        <van-tabbar v-model="active" @change="onTabChange">
            <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item name="family" icon="friends-o">居民</van-tabbar-item>
            <van-tabbar-item name="message" icon="chat-o">消息</van-tabbar-item>
            <van-tabbar-item name="user" icon="contact-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant';
import { getUserInfo, log, LOCAL_USER, LOCAL_DATE } from "../utils/user"
import { getOrg } from "../api/index"


export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        // if (!userInfo) {
        //     router.push("/login")
        // }
        // log("user", userInfo)
        const active = ref("home");
        const orgInfo = reactive({
            doc: 0,
            orderNum: 0,
            orderMoney: 0
        })
        onMounted(() => {
            // getOrg({ oid: userInfo.oid, uid: userInfo.uid }).then(res => {
            //     log("org", res);
            //     if (res.success) {
            //         orgInfo.doc = res.data.doc
            //         orgInfo.orderNum = res.data.order.nums
            //         orgInfo.orderMoney = res.data.order.all_pay
            //     }
            // })
        })
        const goTo = (name) => {
            if (name == "dangAn") {
                router.push("/DangAnCreate")
            }
            if (name == "qianYue") {
                router.push("/QianYue")
            }
            if (name == "fuWu") {
                router.push("/FuWu")
            }
        }

        const loginOut = () => {
            showConfirmDialog({
                title: '提示',
                message: '您确认退出账号吗?',
            })
                .then(() => {
                    localStorage.setItem(LOCAL_USER, null);
                    showToast("退出成功")
                    router.push("/login")
                })
                .catch(() => {
                });
        }

        const onTabChange = (name) => {
            if (name == "family") {
                router.push("/DangAn")
            }
            if (name == "message") {
                router.push("/Message")
            }
            if (name == "user") {
                router.push("/User")
            }
        }

        return {
            active,
            goTo,
            loginOut,
            onTabChange,
            userInfo,
            orgInfo
        };
    },
};
</script>

<style scoped>
.main-box {
    margin: 10px;
}

.top-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 2vh;
}

.info-box {
    height: 20vh;
    background: #49B9AD;
    padding: 1vh 0 1vh 0;
    /* border-radius: 20px;
        padding: 40px;
        background-image: url("/static/img/topBg.png");
        background-size: cover;
        background-size: cover;
        background-repeat: repeat; */
    color: #FFFFFF;
    font-size: 23px;
}

.info-item{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin: 2vh 0;
}

.info-title {
    margin-top: 1vh;
    font-size: 14px;
}

.item-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    color: #1C2023;
    font-size: 14px;
    margin-top: 2vh;
}
</style>